<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    padding: 18px 22px 22px 22px;
    background-color: rgb(240, 242, 245);
    margin-bottom: 80px;
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
  .form-operator-button{
    background-color: #fff;
    position: fixed;
    width: 100%;
    left: 0px;
    right: 0;
    bottom: 33px;
    height: 64px;
    line-height: 64px;
    text-align: right;
    box-shadow: 0 -1px 2px 0 rgba(0,0,0,.05);
    z-index: 10;
  }
  .form-el-radion{
    line-height: 30px;
    padding: 5px 0px;
    width: 100%;
  }
  .hex-form-inf {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
    margin-right: 40px;
    position: relative;
    min-height: 33px;
    margin-left: 60px;
    line-height: 33px;
  }
  .hex-form-inf-content {
    font-size: 14px;
    font-weight: 500;
    display: none;
  }
  .hex-form-inf-icon {
    font-size: 20px;
    margin-top: 5px;
    position: absolute;
    right: 0px;
  }
  .clearfix span {
    font-size: 18px;
  }
  .table tr{
    border-bottom: 1px solid #EBEEF5;
    line-height: 40px;
    height: 40px;
    padding: 5px 10px;
  }
  .table {
    border-collapse: collapse;
    cellspacing: 0;
    text-align: center;
  }
  .layuiadmin-card-list {
    padding: 15px;
  }
  .layui-card-body {
    position: relative;
    padding: 10px 15px;
    line-height: 24px;
  }
  .layuiadmin-card-list p.layuiadmin-big-font {
    font-size: 36px;
    color: #666;
    line-height: 36px;
    padding: 5px 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
  }
  .layuiadmin-span-color {
    font-size: 14px;
    position: absolute;
    right: 15px;
  }
  .el-card__header{
    padding: 10px 15px;
  }
  .layuiadmin-span-color{
    color:turquoise
  }
</style>
<template>
  <div class="app-container">
    <el-row style="margin-left: -10px;margin-right: -10px">
      <el-col :span="6" style="padding-left: 10px;padding-right: 10px">
        <el-card class="box-card" :body-style="{ padding: '0px' }">
          <div slot="header" class="clearfix">
            <span>节点的数量</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">
            <p class="layuiadmin-big-font">{{topData.nodeNum}}</p>
            <p>节点<span class="layuiadmin-span-color"> <i class="el-icon-s-data"></i></span></p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" style="padding-left: 10px;padding-right: 10px">
        <el-card class="box-card" :body-style="{ padding: '0px' }">
          <div slot="header" class="clearfix">
            <span>应用的数量</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">
            <p class="layuiadmin-big-font">{{topData.appNum}}</p>
            <p>应用<span class="layuiadmin-span-color"> <i class="el-icon-star-on"></i></span></p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" style="padding-left: 10px;padding-right: 10px">
        <el-card class="box-card" :body-style="{ padding: '0px' }">
          <div slot="header" class="clearfix">
            <span>周期任务的数量</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">
            <p class="layuiadmin-big-font">{{topData.cycleTaskNum}}</p>
            <div>周期任务<span class="layuiadmin-span-color"> <i class="el-icon-s-platform"></i></span></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" style="padding-left: 10px;padding-right: 10px">
        <el-card class="box-card" :body-style="{ padding: '0px' }">
          <div slot="header" class="clearfix">
            <span>定时任务的数量</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">
            <p class="layuiadmin-big-font">{{topData.cronTaskNum}}</p>
            <p>定时任务<span class="layuiadmin-span-color"> <i class="el-icon-message-solid"></i></span></p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row type="flex" class="row-bg">
      <el-col :span="8">
        <el-card class="box-card" :body-style="{ padding: '0px' }">
          <div slot="header" class="clearfix">
            <span>中心Master节点信息</span>
          </div>
          <table class="table" style="width: 100%;">
            <tbody>
            <tr>
              <td class="field-label">中心名称</td>
              <td colspan="3" class="field-value currentModeOnly">{{ centerInf.centerName }}</td>
            </tr>
            <tr>
              <td class="field-label">IP</td>
              <td class="field-value currentModeOnly">{{centerInf.centerIp}}</td>
              <td class="field-label">状态</td>
              <td class="field-value currentModeOnly">
                <div class="usage" style="    margin-top: -7px;">
                  <span class="usage-reading">{{formatterCenterStatus(centerInf.centerStatus)}}</span>
                </div>
              </td>
            </tr>
            <tr>
              <td class="field-label">端口</td>
              <td class="field-value currentModeOnly">{{centerInf.centerPort}}</td>
              <td class="field-label">有效节点数量</td>
              <td class="field-value currentModeOnly">
                <div class="usage" style="    margin-top: -7px;">
                  <span class="usage-reading"> {{centerInf.validAgentNum}}</span>
                </div>
              </td>
            </tr>
            <tr>
              <td class="field-label">更新时间</td>
              <td colspan="3" class="field-value currentModeOnly">{{centerInf.upTs}}</td>
            </tr>
            </tbody>
          </table>
        </el-card>
        <el-card class="box-card" :body-style="{ padding: '0px' }" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span>运行状况日志表</span>
          </div>
          <div class="grid-content bg-purple">
            <el-table :show-header="false"  :data="nodeList"  style="width: 100%;" height="280" v-el-table-infinite-scroll="load">
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="标题">
                      <span>{{ props.row.remindTitle }}</span>
                    </el-form-item>
                    <el-form-item label="来源名称">
                      <span>{{ props.row.srcName }}</span>
                    </el-form-item>
                    <el-form-item label="内容">
                      <span>{{ props.row.remindContent }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column prop="remindTitle" :show-overflow-tooltip="true" label="标题">
                <template slot-scope="scope">
                  <i class="el-icon-success" v-if="scope.row.warnLevel =='info'" style="color: #42800d;font-size: 16px"></i>
                  <i class="el-icon-warning" v-if="scope.row.warnLevel == 'warn'" style="color: #FF8300;font-size: 16px"></i>
                  <i class="el-icon-error" v-if="scope.row.warnLevel == 'error'" style="color: #ADB2B6;font-size: 16px"></i>
                  <span style="margin-left: 10px">{{ scope.row.remindTitle }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="crtTs" label="创建时间" >
                <template slot-scope="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.crtTs }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16" style="margin-left: 15px">
        <el-card class="box-card" :body-style="{ padding: '0px' }">
          <div slot="header" class="clearfix">
            <span>图表</span>
            <div style="float:right;" class="aa">
              <el-link style="margin-left: 10px;" target="_blank" class="buttonText"  type="primary" @click="changeTime('1')" :underline="false">30分钟</el-link>
              <el-link style="margin-left: 10px;" target="_blank" class="buttonText"  type="primary" @click="changeTime('2')" :underline="false">1小时</el-link>
              <el-link style="margin-left: 10px;" target="_blank" class="buttonText"  type="primary" @click="changeTime('3')" :underline="false">6小时</el-link>
              <el-link style="margin-left: 10px;" target="_blank" class="buttonText"  type="primary" @click="changeTime('4')" :underline="false">12小时</el-link>
              <el-link style="margin-left: 10px;" target="_blank" class="buttonText"  type="primary" @click="changeTime('5')" :underline="false">1天</el-link>
              <el-link style="margin-left: 10px;" target="_blank" class="buttonText"  type="primary" @click="changeTime('6')" :underline="false">7天</el-link>
              <el-link style="margin-left: 10px;" target="_blank" class="buttonText"  type="primary" @click="changeTime('7')" :underline="false">30天</el-link>
            </div>
          </div>

          <div style="padding: 10px">
            <el-row>
              <el-col :span="12" style="padding: 10px">
                <div class="grid-content bg-purple-light" style="border:1px solid #D6D8DB;">
                  <div style="font-size: 14px;margin: 1%;font-weight: 700;">任务执行结果统计
                    <el-tooltip class="item" effect="dark" content="主机1分钟、15分钟和30分钟任务的执行结果统计" placement="bottom">
                      <i  style="margin-left: 3%" class="el-icon-question"></i>
                    </el-tooltip>
                  </div>
                  <taskFinishStatusLineChart ref="taskFinishStatusLineChart"/>
                </div>
              </el-col>
              <el-col :span="12" style="padding: 10px">
                <div class="grid-content bg-purple-light" style="border:1px solid #D6D8DB;">
                  <div style="font-size: 14px;margin: 1%;font-weight: 700;">阻塞系数统计
                    <el-tooltip class="item" effect="dark" content="主机1分钟、15分钟和30分钟的阻塞系数的统计" placement="bottom">
                      <i  style="margin-left: 3%" class="el-icon-question"></i>
                    </el-tooltip>
                  </div>
                  <taskBlockLineChart ref="taskBlockLineChart"/>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <resetPass ref="pass" />
  </div>
</template>
<script>
  import api from '@/api/app/appInf'
  import adminApi from '@/api/dashboard/admin'
  import {mapGetters} from 'vuex'
  import dict from '@/api/system/dict'
  import taskFinishStatusLineChart from '../../app/app360/components/taskFinishStatusLineChart'
  import taskBlockLineChart from '../../app/app360/components/taskBlockLineChart'
  import elTableInfiniteScroll from 'el-table-infinite-scroll';
  import center from '@/api/center/center_conf'
  import resetPass from '../../system/user/center/resetPass'
  import user from '@/api/system/user'

  export default {
    name: 'appInf',
    directives: {
      'el-table-infinite-scroll': elTableInfiniteScroll
    },
    components: { taskFinishStatusLineChart, taskBlockLineChart, dict, resetPass},
    mixins: [],
    dicts: ['center_status','warn_level'],
    data() {
      return {
        time:0.5,
        centerInf:{},
        warnList:[],
        topData:{nodeNum:0,appNum:0,cycleTaskNum:0,cronTaskNum:0},
        nodeList:[],
        hasLogData: true,
        activeModel: 'app',
        pageIndex: 0,
        jobList:[
          { bizDate:'2020-12-24',todoRunCount:3210,runningCount:132 },
          { bizDate:'2020-12-23',todoRunCount:310,runningCount:32 },
          { bizDate:'2020-12-22',todoRunCount:110,runningCount:2 },
          { bizDate:'2020-12-21',todoRunCount:10,runningCount:0 }
        ],
        gridData:[
          {"operation":"以JSON格式导出"},
          {"operation":"以CSV格式导出"},
          {"operation":"查看详情"}
        ],
        // percentage:20,
        customColor:"#42800D",
        detailShow:"",
        disOption:{
          cpuDisplay:true,
          memDisplay:true,
          fzDisplay:true,
          alertDisplay:true
        }
      }
    },
    computed: {
      ...mapGetters([
        'user'
      ])
    },
    created() {
      this.user.roles.forEach(item =>{
        if ('admin' == item){
          this.activeModel = 'admin'
        }
      })
      //初始化基本信息
      this.initMasterInfo();
      //初始化中心运行状况日志信息
      this.initMasterRunningStateLog();
      this.inintTopData();
      this.isFirstLogin();
    },
    methods: {
        isFirstLogin() {
              //登录前做判断,第一次登录需要强制重置密码
              user.isResetPassWord(this.user.username)
                .then((res) => {
                  if (res == true) {
                    this.$refs.pass.dialog = true
                  }
                })
                .catch(() => {});
            },
      load() {
        if (this.hasLogData && this.pageIndex < 100){
          this.pageIndex++;
          this.initMasterRunningStateLog();
        }
      },
      formatterCenterStatus(val){
        return this.dict.label.center_status[val]
      },
      changeTime(timeType){
        this.$refs.taskFinishStatusLineChart.getData(timeType);
        this.$refs.taskBlockLineChart.getData(timeType);
      },
      //初始化中心信息
      initMasterInfo(){
        center.initMasterInfo().then(res=>{
          if (res){
            this.centerInf = res;
          }
        })
      },
      //初始化中心运行状况日志表
      initMasterRunningStateLog(){
        api.initMasterRunningStateLog(this.pageIndex).then(res=>{
          if (res){
            if (res != null && res.length > 0){
              this.nodeList = this.nodeList.concat(res);
            } else {
              this.hasLogData = false;
            }
          }
        })
      },
      inintTopData(){
        adminApi.findAdminTopData().then(res =>{
          if(res){
             this.topData = res;
          }
        })
      },
    }
  }
</script>
